<template>
  <view class="container   page-bg">
    <view class="px-2">

      <view class="bg-fff p-2 rounded20 mb-2 d-flex d-flex-middle d-flex-between" @click="openModal">
        <view class="font26 text-right" style="width: 150rpx;">
          <text class="colorprice">*</text>
          <text class="color666">选择游戏：</text>
        </view>
        <view class="d-flex-item py-1-5 px-1 text-right">
          <text
              :class="{'colorhold':game_name == ''}">{{ game_name == '' ? '请选择游戏' : game_name }}
          </text>
        </view>
        <text class="iconfont icon-youjiantou color999 mr-1"></text>
      </view>

      <view class="bg-fff p-2 rounded20 mb-2">
        <view class="font30">
          <text class="colorprice">*</text>
          上传游戏技能图
        </view>
        <view class="d-flex d-flex-middle py-1-5 d-flex-wrap mt-1">
          <view class="pr-3 d-flex d-flex-middle" v-for="(item,index) in _skillMethod" :key="index+'b'"
                @click="method(item)">
            <image :src="item.icon" class="yxIcon"></image>
            <text class="ml-1">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <view class="photo-grid my-2">
        <view class="photo-item rounded20 colorFC6127">
          <uni-file-picker
              v-model="skillImageList"
              :auto-upload="false"
              :limit="1"
              :source-type="['album', 'camera']"
              @select="handleImageSelect"
              @delete="handleImageDelete"
              file-mediatype="image">
            <view class="d-flex d-flex-column d-flex-center" style="height: 100%;">
              <image
                  v-if="formData.skill_image"
                  :src="formData.skill_image"
                  mode="aspectFill"
                  style="width: 100%; height: 100%;"
              />
              <template v-else>
                <image
                    mode="widthFix"
                    class="img"
                    src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/camera.png">
                </image>
                <text class="text mt-1 font24">上传</text>
              </template>
            </view>
          </uni-file-picker>
        </view>
        <view class="photo-item rounded20">
          <image mode="widthFix" class="img"
                 src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/diagram.jpg"></image>
        </view>
      </view>


      <view class="bg-fff p-2 d-flex d-flex-column rounded20  mb-2">
        <view class="font30">
          <text class="colorprice">*</text>
          填写社交魅力
        </view>
        <view class="font26 color999 mt-1">建议描述你的游戏/性格/社交特质</view>
        <textarea class="note-textarea p-2 my-2 rounded20"
                  placeholder="内容不可涉黄，可以介绍自己特色技能，如： 我AK很厉害等"
                  placeholder-class="color999"
                  v-model="formData.remark" @input="handleInput" :maxlength="200"
                  :style="{ height: textareaHeight + 'px' }"></textarea>

        <view class="font26 color598dfc5 color666 p-2 rounded20 mt-2">
          <text>示例</text>
          <text>你好，我是多赛季王者，技术靠谱，有趣搞 笑，上中下路我都可~选我，可以语音教你 出装和打法，给你最好的保护，让你感受到
            到最优
          </text>
        </view>
      </view>

      <view class="d-flex d-flex-center pb-5" @click="handleSubmit">
        <view class="bgcolor598dfc colorfff d-flex-item font30 p-2 text-center rounded30">提交审核
        </view>
      </view>
    </view>

    <!-- 选择游戏 -->
    <uni-popup ref="drawerVisible" :safe-area="false" type="bottom" style="position: relative;z-index: 999991;">
      <view class="bg-fff py-4 pb-5 px-2">
        <view class="d-flex d-flex-between">
          <text></text>
          <text class="font32 ml-2">选择游戏</text>
          <text @click="$refs.drawerVisible.close()">取消</text>
        </view>
        <view class=" py-1  category d-flex my-4  d-flex-middle d-flex-wrap ">
          <view v-for="(item,inde) in categoryList" @click="onCategory(item,inde)" :key="inde+'c'"
                style="width: 20%" class="d-flex-column d-flex-middle my-1">
            <view class="cate rounded20" :class="{'cateActive':categoryIndex == inde}">
              <image :src="item.icon" class="rounded20 cateImg"></image>
            </view>
            <text class="font24 mt-1">{{ item.name }}</text>
          </view>
        </view>
        <view class="d-flex d-flex-center pb-5 m-2" @click="closeModal">
          <view class="bgcolor598dfc colorfff d-flex-item font30 p-2 text-center rounded30">
            确认选择
          </view>
        </view>
      </view>
    </uni-popup>

  </view>
</template>

<script>
import {homeApi} from "@/http/homeApi";
import {fileApi} from "@/http/fileApi.js";
import {mapState} from "vuex";

export default {
  data() {
    return {
      _skillMethod: [{
        id: '1',
        icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/zheng.png',
        name: '清晰完整'
      }, {
        id: '2',
        name: '包括本人id',
        icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/zheng.png',
      }, {
        id: '3',
        name: '当前段位',
        icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/zheng.png',
      }, {
        id: '4',
        name: '昵称违规', icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/cuo.png',
      },],
      textareaHeight: 120,
      categoryList: [],
      categoryIndex: -1,
      game_name: '',
      formData: {
        game_id: '',
        skill_image: '',
        remark: ''
      },
      categoriesData: {},
      skillImageList: [],
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    })
  },
  onLoad(option) {
    this.categories();
  },
  methods: {
    async categories() {
      let res = await homeApi.getMyGame()
      this.categoryList = res
    },
    handleInput(e) {
      this.wordCount = e.detail.value.length
      // 根据内容自动调整高度
      if (this.wordCount > 100) {
        this.textareaHeight = 160
      }
    },
    async handleImageSelect(event) {
      try {
        uni.showLoading({
          title: '上传中...'
        });

        const files = event.tempFiles;
        if (files && files.length > 0) {
          const filePath = files[0].path;

          // 上传图片
          const res = await fileApi.upload(filePath);

          uni.hideLoading();

          if (res && res.data) {
            this.formData.skill_image = res.data;
            // 更新 skillImageList 以显示已上传的图片
            this.skillImageList = [{url: res.data}];
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: '上传失败',
              icon: 'none'
            });
          }
        }
      } catch (err) {
        uni.hideLoading();
        uni.showToast({
          title: '上传失败',
          icon: 'none'
        });
        console.error('上传失败:', err);
      }
    },
    // 处理图片删除事件
    handleImageDelete() {
      this.formData.skill_image = '';
      this.skillImageList = [];
    },
    validateForm() {
      if (!this.formData.game_id) {
        uni.showToast({
          title: '请选择游戏',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.skill_image) {
        uni.showToast({
          title: '请上传游戏技能图',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.remark) {
        uni.showToast({
          title: '请填写社交魅力内容',
          icon: 'none'
        })
        return false
      }

      // 检查内容长度
      if (this.formData.remark.length < 10) {
        uni.showToast({
          title: '社交魅力内容至少10个字',
          icon: 'none'
        })
        return false
      }

      return true
    },
    async handleSubmit() {
      if (!this.validateForm()) {
        return
      }

      // 表单验证通过，执行提交逻辑
      uni.showLoading({
        title: '提交中...'
      })
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)
      } else {
        await fileApi.handSubmit(this.formData)
        uni.showToast({
          title: '去后台审核技能',
          icon: 'success'
        })
        // 提交成功后跳转
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/mySkill/mySkill'
          })
        }, 1500)
      }
    },
    openModal(e) {
      this.$refs.drawerVisible.open()
    },
    closeModal() {
      this.$refs.drawerVisible.close()
      this.game_name = this.categoriesData.name;
      this.formData.game_id = this.categoriesData.id;
    },
    onCategory(data, index) {
      this.categoriesData = data
      this.categoryIndex = index
    },
  },

}
</script>

<style scoped>
.container {
  position: relative;
}

.form-row {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}

.label {
  width: 160rpx;
}

input {
  flex: 1;
  height: 80rpx;
  font-size: 28rpx;
}


.photo-grid {
  display: flex;
  justify-content: space-between;
}

.photo-item {
  width: 48%;
  height: 180rpx;
  overflow: hidden;
}

.photo-item ::v-deep .uni-file-picker__container {
  width: 100%;
  height: 180rpx;
  margin: 0;
}

.photo-item ::v-deep .uni-file-picker__files {
  width: 100%;
  height: 100%;
}

.photo-item ::v-deep .file-picker__box {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}


.photo-item ::v-deep .file-picker__box-content {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important;
}

.placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #FC6127;
}

.colorFC6127 {
  border: 1rpx dashed #FC6127;
}

.placeholder .img {
  width: 30%;
}

.colorprice {
  color: #f56c22;
  margin-right: 6rpx;
}

.cateActive {
  background: #aec8ff;
  border: 10rpx solid #aec8ff;
}


.color598dfc5 {
  background: rgba(89, 141, 252, .2);
}

.note-textarea {
  background: #f9f9f9;
  width: 93%;
}


.bgcolor598dfc {
  background-color: #598dfc;
}

.r-bottom {
  position: absolute;
  text-align: center;
  bottom: 60rpx;
  left: 30rpx;
}

.cate {
  width: 84rpx;
  height: 84rpx;
  overflow: hidden;
  border: 8rpx solid transparent;
}

.cateImg {
  width: 84rpx;
  height: 84rpx;
}

.yxIcon {
  height: 30rpx;
  width: 30rpx;
}

</style>